<template>
	<view class="cartContainer">
		<view class="title">购物车</view>
		
		<view class="cartList">
			<view class="cartItem" v-for="(goods, index) in goodsList" :key="goods.id">
				<text class="iconfont icon-xuanzhong"
				 :class="{selected: goods.isChecked}"
				 @click="changeOneCheck(goods)"
				></text>
				<view class="goods">
					<image class="goodsImg" :src="goods.imgUrl" mode=""></image>
					<view class="goodsInfo">
						<text class="goodsName">{{goods.goodsName}}</text>
						<text class="goodsPrice">价格: ￥ {{goods.goodsPrice}}</text>
					</view>
				</view>
				<view class="playCount">
					<text class="add" @click="changeCountNum(goods, 1, index)">+</text>
					<text class="count">{{goods.count}}</text>
					<text class="sub" @click="changeCountNum(goods, -1, index)">-</text>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<text class='iconfont icon-xuanzhong'
			:class="{selected: isCheckAll}"
			@click="changeIsCheckAll"
		></text>
			<text class="allSelected">已选 {{selectedNum}}</text>
			<view class="right">
				<text class="totalPrice">合计: {{allMoney}}</text>
				<text class="preOrder">下单</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex';
export default {
	data() {
		return {
			
		};
	},
	mounted(){
		this.getCartList();
	},
	methods: {
		getCartList(){
			this.$store.dispatch('cart/getCartList');
		},
		// 单个选中状态
		changeOneCheck(goods){
			goods.isChecked = !goods.isChecked;
		},
		// 控制商品数量
		changeCountNum(goods, disNum, index){
			goods.count += disNum;
			goods.isChecked = true;
			// 当数量为0时, 删除当前商品
			if(goods.count === 0){
				uni.showModal({
					title: '提示',
					content: `确认删除${goods.goodsName}吗?`,
					success: (res) => {
						if (res.confirm) {
							this.goodsList.splice(index, 1);
						} else if (res.cancel) {
							goods.count = 1;
							goods.isChecked = true;
						}
					}
				});
			}
		},
		// 全选全不选使用 v-model+计算属性, 修改进入set()
		changeIsCheckAll(){
			this.isCheckAll = !this.isCheckAll;
		}
		
	},
	computed: {
		...mapGetters('cart', ['goodsList']),
		// 已选数量
		selectedNum(){
			return this.goodsList.reduce((prev, item) => {
				if(item.isChecked){
					prev += item.count;
				}
				return prev;
			}, 0)
		},
		// 总价格
		allMoney(){
			return this.goodsList.reduce((prev, item) => {
				if(item.isChecked){
					prev += item.count * item.goodsPrice;
				}
				return prev;
			}, 0)
		},
		// 全选全不选 (v-model+计算属性)
		isCheckAll: {
			get(){
				return this.goodsList.every(item => item.isChecked) && this.goodsList.length
			},
			set(val){
				return this.goodsList.forEach(item => item.isChecked = val);
			}
		}
	}
};
</script>

<style lang="stylus">
	@import url('../../static/iconfont/iconfont.styl')
	.cartContainer
		height: 100%
		.title
			width: 100%
			height: 50upx
			line-height: 50upx
			padding: 0 20upx
			box-sizing: border-box
			// border: 2upx solid red
		.cartList
			height: calc(100vh - 200upx)
			.cartItem
				height: 200upx
				display: flex
				// justify-content: space-between
				align-items: center
				box-sizing: border-box
				padding: 0 30upx
				// border: 2upx solid black
				.iconfont
					color #999
					&.selected
						color: #BB2C08
				.goods
					flex: 1
					display: flex
					align-items: center
					.goodsImg
						width: 150upx
						height: 150upx
					.goodsInfo
						font-size 28upx
						display flex
						flex-direction column
						margin-left 20upx
						text
							line-height 60upx
						.goodsPrice
							color: #BB2C08
				.playCount
					right 20upx
					bottom 30upx
					text
						display inline-block
						width 60upx
						height 50upx
						text-align center
						line-height 50upx
						border 1upx solid #EEEEEE
						&:nth-child(2)
							border none
							border-top 1upx solid #EEEEEE
							border-bottom 1upx solid #EEEEEE
		.footer
			width 100%
			height: 150upx
			display flex
			background #fff
			font-size 30upx
			line-height: 150upx
			box-sizing: border-box
			// border: 2upx solid green
			.iconfont
				font-size 40upx
				margin 0 20upx
				color: #999
				&.selected
					color: #BB2C08
			.right 
				height 96upx
				position absolute
				right 0
				.totalPrice
					display inline-block
					height 96upx
					line-height 96upx
				.preOrder
					display inline-block
					background #DD1A21
					width 225upx
					height 96upx
					line-height 96upx
					text-align center
					font-size 28upx
					color #fff
					margin-left 30upx
</style>